<!--资产管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">资产单列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="beforeAddAsset"
    >新增资产
    </el-button>
  </div>
  <!-- 新增资产弹窗 -->
  <el-dialog :title="dialogTitle"
             v-model="addAssetDialogVisible"
             style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产名">
            <el-input placeholder="请输入资产名称" v-model="addForm.name"></el-input>
            <!--            <el-input readonly :value="user.username"></el-input>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库时间">
            <el-date-picker
                type="datetime"
                placeholder="选择日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                size="large"
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产类别">
            <el-select placeholder="请选择" v-model="addForm.assetCategory">
              <el-option
                  v-for="item in categoryOptions"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"
                      v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="数量">
            <el-input-number :min="1" :max="1000" v-model="addForm.num"/>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addApplication">确定</el-button>
    </template>
  </el-dialog>
<!--  资产编辑弹窗-->
  <el-dialog :title="资产编辑"
             v-model="editAssetDialogVisible"
             style="width:1000px;padding:40px;"
             :before-close="handleEditClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产名"><el-input v-model="assetDetail.assetName"/></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产编号"><el-input v-model="assetDetail.assetCode"/></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产类别">
            <el-select placeholder="请选择" v-model="addForm.assetCategory">
              <el-option
                  v-for="item in categoryOptions"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库时间">
            <el-date-picker
                type="datetime"
                placeholder="选择日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                size="default"
                v-model="assetDetail.addTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="员工姓名"><el-input v-model="assetDetail.employeeName" disabled="true" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工ID"><el-input v-model="assetDetail.assetCode" disabled="true" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"
                      v-model="assetDetail.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addApplication">修改</el-button>
    </template>
  </el-dialog>
  <!-- 资产展示列表 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="4">
          <el-form-item label="资产名">
            <el-input placeholder="请输入资产名" v-model="searchApplication.assetsName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="资产类别">
            <el-select placeholder="请选择" v-model="searchApplication.assetsCategory">
              <el-option v-for="item in categoryOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="资产状态">
            <el-select placeholder="请选择" v-model="searchApplication.status">
              <el-option v-for="item in statusOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>

            <el-button style="background-color: #062d50;color: #fff;" @click="exportExcelSelect">
              <el-icon>
                <Download />
              </el-icon>
              <span>导出</span>
            </el-button>
            <el-button style="background-color: #00AEEc;color: #fff;" @click="loadApplication">
              <el-icon>
                <Search/>
              </el-icon>
              <span>搜索</span>
            </el-button>
            <el-button style="background-color: #f0c24c;color: #fff;" @click="resetSearch">
              <el-icon>
                <RefreshRight/>
              </el-icon>
              <span>重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 资产管理表格 -->
  <el-card style="margin:20px">
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" ></el-table-column>
      <el-table-column type="index" width="80" align="center" prop="id" label="序号"></el-table-column>
      <el-table-column align="center" prop="assetName" label="资产名"></el-table-column>
      <el-table-column align="center" prop="brand" label="品牌"></el-table-column>
      <el-table-column align="center" prop="assetCode" label="资产编号"></el-table-column>
      <el-table-column align="center" prop="addTime" label="入库时间"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注"></el-table-column>
      <el-table-column align="center" prop="operator" label="操作人"></el-table-column>
      <el-table-column align="center" prop="status" label="资产状态"
                       :formatter="assetStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template #default="scope">
          <el-button type="primary" size="default" link
                     @click="edit(scope.row.id)">编辑
          </el-button>
          <el-button type="warning" size="default" link
                     @click="edit(scope.row.id)">报废
          </el-button>
          <el-button type="danger" size="default" link
                     @click="deleteAsset(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--导出资产单列表弹窗-->
  <el-dialog title="导出资产信息为excel表格--数据预览" v-model="dialogExcelVisible" :before-close="exportClose" width="80%">
    <el-table :data="selectData" id="selectTable" >
      <el-table-column prop="assetName" label="资产名" align="center"></el-table-column>
      <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
      <el-table-column prop="assetCode" label="资产编号" align="center"></el-table-column>
      <el-table-column prop="addTime" label="入库时间" align="center"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      <el-table-column prop="operator" label="操作人" align="center"></el-table-column>
      <el-table-column prop="status" label="资产状态" :formatter="assetStatusFormatter" align="center"></el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="exportClose">取 消</el-button>
      <el-button type="primary" @click="exportExcel">确 定 导 出</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import {getTime} from "element-plus/es/components/countdown/src/utils";
import {Download} from "@element-plus/icons-vue";
import htmlToExcel from "@/utils/htmlToExcel";

//定义变量控制新增资产弹窗是否出现
const addAssetDialogVisible = ref(false);

//定义变量控制资产编辑弹窗是否出现
const editAssetDialogVisible = ref(false);


//定义变量用来控制弹窗的标题
const dialogTitle = ref('新增资产');

//获取当前登录的用户信息
const user = ref(getUser());
//定义数组用来保存新增入库单时,对应经手人的id,入库使用
const auditUserIdList = ref([]);


//定义加载审批人的方法
const loadAuditUser = () => {

}
onMounted(() => {
  //因为当前登录人的直属领导与上上级是固定的,所以只需要在页面加载完毕时加载一次即可,无需重复请求
  loadAuditUser();
})

//定义数组用来保存资产入库单的时间
const times = ref([]);
//定义数组用来保存选择时间的快捷方式
const shortcuts = [
  {
    text: '今日',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
//定义禁用日期变量
const disabledDate = (time) => {
  return time.getTime() > Date.now();
}
// 点击"新增资产"按钮,出弹窗+修改弹窗标题
const beforeAddAsset = () => {
  addAssetDialogVisible.value = true;
  dialogTitle.value = '新增资产'
}

//定义对象用来保存新增资产的表单数据
const addForm = ref({
  assetName: '',//资产名称
  assetCode: '',//资产编号
  assetCategory: '',//资产类别
  num: '',//入库数量
  remark: '',//备注
});

//定义对象用来保存从后端资产表查询出来的资产信息,ById
const assetDetail =ref({
  assetName: '',//资产名称
  assetCode: '',//资产编号
  assetCategory: '',//资产类别
  employeeId:'',//员工id
  employeeName:'',//员工姓名
  addTime:'',//资产入库时间
  remark: '',//备注
})
//定义方法发送新增入库单的请求
const addAsset = () => {
  //准备给后端新增审请单的数据
  addForm.value.addTime = times.value.join(' ');//入库日期  日期和时间拼接成字符串
  console.log(addForm.value);

  let data = qs.stringify(addForm.value);
  //给后端发新增请求

}
//处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('是否要关闭本弹窗?')) {
    addAssetDialogVisible.value = false;//关闭弹窗
    times.value = [];//清空时间选择器组件
    addForm.value = {};//清空表单项
    addForm.value.num = 0;//将表单项里的数字类型置为0
  }
}
//处理编辑弹窗关闭的方法
const handleEditClose = () => {
  if (confirm('是否要关闭本弹窗?')) {
    editAssetDialogVisible.value = false;//关闭弹窗
  }
}


//定义编辑资产的方法
const edit = (id) => {
  editAssetDialogVisible.value = true;

  }

//准备数组用来保存查出来的资产单表格数据
//const tableData = ref([]);
//下面搞个假数据
const tableData = ref([
  {
    assetCode: 'LSJDJJFKKK10000001',
    assetName: '显示器',
    brand: 'Dell',
    addTime: '2023-11-24 15:30:22',
    remark: '大帅比专用',
    operator: '老张',
    status: '使用中'
  },
  {
    assetCode: 'MNAPPLE10000003',
    assetName: 'Macbook Air',
    brand: 'Apple',
    addTime: '2023-11-22 11:20:56',
    remark: '主板进水，返厂维修了',
    operator: 'LLM',
    status: '维修中'
  },
  {
    assetCode: 'MNAPPLE10000003',
    assetName: 'Macbook Air',
    brand: 'Apple',
    addTime: '2023-11-22 11:20:56',
    remark: '主板进水，返厂维修了',
    operator: 'LLM',
    status: '维修中'
  },
  {
    assetCode: 'MNAPPLE10000003',
    assetName: 'Macbook Air',
    brand: 'Apple',
    addTime: '2023-11-22 11:20:56',
    remark: '主板进水，返厂维修了',
    operator: 'LLM',
    status: '维修中'
  },
  {
    assetCode: 'MNAPPLE10000003',
    assetName: 'Macbook Air',
    brand: 'Apple',
    addTime: '2023-11-22 11:20:56',
    remark: '主板进水，返厂维修了',
    operator: 'LLM',
    status: '维修中'
  },
]);
//准备对象用来保存搜索条件
const searchApplication = ref({
  assetsName: '',//资产名
  assetsCategory: '',//资产类别
  status: '',//资产状态
});

//定义加载入库单的方法
const loadApplication = () => {
  let data = qs.stringify(searchApplication.value);

}

onMounted(() => {
  loadApplication();
})

//定义重置搜索条件的方法
const resetSearch = () => {
  searchApplication.value = {};
  loadApplication();
}


//定义数组用来保存资产的状态,后期可以考虑纳入字典统一管理
const statusOptions = ref([
  {label:"库中",value:101},
  {label:"使用中",value:102},
  {label:"故障",value:103},
  {label:"维修中",value:104},
  {label:"报废",value:105},
  {label:"遗失",value:106},
]);

//定义数字用来保存资产类别
const categoryOptions=ref([
  {label:"电脑硬件",value:201},
  {label:"桌椅",value:202},
  {label:"耗材",value:203},
  {label:"打印机",value:204},
]);
//一进入页面立即加载资产单
onMounted(() => {
})

//对资产单状态显示内容进行文字转换
const assetStatusFormatter = (row, column, cellValue, index) => {
  if (!statusOptions.value) {
    return cellValue;
  }
  for (let item of statusOptions.value) {
    if (item.value == cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
//导出
const selectData=ref([]);
//控制导出数据弹窗
const dialogExcelVisible=ref(false);
//关闭导出资产弹窗的方法
const exportClose = () => {
  if (confirm('是否要关闭本弹窗？')) {
    dialogExcelVisible.value=false;
  }
};
//点击<确定导出>按钮触发的方法
const exportExcel=()=>{
  htmlToExcel.getExcel('#selectTable','导出的自定义标题');
};
//点击搜索栏的<导出>按钮触发的方法
const exportExcelSelect=()=>{
  if (selectData.value.length<1){
    ElMessage.warning('请选择要导出的内容！');
    return false;
  }
  dialogExcelVisible.value=true;
};
const handleSelectionChange=(val)=>{
  selectData.value=val;
};


</script>


<style scoped>
</style>